<template>
    <div v-for="item in list" :key="item.type">
        <div v-if="item.classify" class="classsify">
            {{ item.classify }}
        </div>
        <div v-else class="component" :customType="item.type" @mousedown="mouseDown($event,item.componentName)" @mouseup="mouseUp($event,item.componentName)" @dragend="dragEnd">
            {{ item.name }}
        </div>
    </div>
</template>
    
<script setup>
import {defineEmits} from 'vue'
import { dragComponentsName } from '@/store/pinia';
const list = dragComponentsName().componentsInfo
const emits = defineEmits(['mouseDown','mouseUp','dragEnd'])
const mouseDown = (e,componentName) =>{
    emits('mouseDown',e,componentName)
}
const mouseUp = (e,type) =>{
    emits('mouseUp',e)
}
const dragEnd = e => {
    emits('dragEnd',e)
}
</script>

<style scoped>
.component {
    width: 50%;
    /* height: 30px; */
    line-height: 30px;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: #fff;
    margin: 10px;
    cursor: pointer;
}

.component:hover {
    border-color: #409eff;
    color: #409eff;
}

.classsify{
    margin-left: 10px;
    text-align: left;
}
</style>